<template>
	<view class="x-main-content">
		<u-navbar bgColor="#fff" :fixed="true" leftIconColor="#000" leftIconSize="42rpx" autoBack placeholder
			title="代理申请">
		</u-navbar>
		<view style="padding: 20rpx 40rpx 0;">
			<view style="background-color: #fff;font-size: 28rpx;border-radius: 20rpx;">
				<view class="input-box">
					<span>姓名：</span>
					<input type="text" placeholder="请输入真实姓名" maxlength="20" style="text-align: right;"
						v-model="form.name" />
				</view>
				<view class="input-box">
					<span>身份证号：</span>
					<input type="text" placeholder="请输入身份证号" maxlength="18" style="text-align: right;"
						v-model="form.idCard" />
				</view>
				<view class="input-box">
					<span>手机号：</span>
					<input type="text" placeholder="请输入手机号" maxlength="11" style="text-align: right;"
						v-model="form.phone" />
				</view>
				<view class="input-box">
					<span>邮箱：</span>
					<input type="text" placeholder="请输入邮箱" style="text-align: right;" v-model="form.Email" />
				</view>
				<view class="input-box">
					<span>陪诊代理区域：</span>
					<input type="text" placeholder="请输入代理区域" style="text-align: right;" v-model="form.area" />
				</view>
				<view class="input-box">
					<span>陪诊代理医院：</span>
					<input type="text" placeholder="请输入代理医院" style="text-align: right;" v-model="form.hospiatl" />
				</view>
				<view class="input-box">
					<span>是否有代理经验：</span>
					<input type="text" placeholder="请输入是或否" maxlength="1" style="text-align: right;"
						v-model="form.flag" />
				</view>
				<view class="input-box" style="display: flex;flex-direction: column;">
					<span style="margin-bottom: 20rpx;">附加信息：</span>
					<textarea cols="30" rows="10" style="border: 1px solid #333;border-radius: 20rpx;padding: 10rpx;"
						maxlength="200" v-model="form.info"></textarea>
				</view>
			</view>
		</view>
		<view class="toConfirm">
			<view class="btn-confirm" @click="toInsert">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					idCard: '',
					phone: '',
					Email: '',
					area: '',
					hospiatl: '',
					flag: '',
					info: ''
				},
				judge: ''
			};
		},
		onHide() {
			this.judge = ''
		},
		methods: {
			toInsert() {
				this.checkObj()
				if (this.judge) {
					uni.showModal({
						title: '提示',
						content: '提交成功！',
						success: res => {
							if (res.confirm) {
								this.form = {}
								uni.navigateBack({
									delta: 1
								})
							}
							if (res.cancel) {
								return
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '请将内容填写完整！'
					})
				}

			},
			checkObj() {
				let obj = this.form
				let keys = Object.keys(obj);
				let arr = []
				for (let i = 0; i < keys.length; i++) {
					let key = keys[i];
					let value = obj[key];
					if (value === '' || value === null || value === undefined) {
						this.judge = false
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.input-box {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;

		input {
			font-size: 28rpx;
		}
	}

	.toConfirm {
		position: fixed;
		width: 100%;
		bottom: 60rpx;
		left: 0;
		display: flex;
		justify-content: center;

		.btn-confirm {
			padding: 12rpx 0;
			background-color: #386fff;
			font-size: 28rpx;
			color: #fff;
			border-radius: 30rpx;
			letter-spacing: 1px;
			width: 600rpx;
			text-align: center;
		}
	}
</style>